<template>
  <div>
    <!-- 自定义指令
            全局自定义指令
                定义：
                    main.js
                      Vue.directive('指令名',{
                        指令的生命周期
                          bind:绑定时(类似beforeMount)
                          inserted:渲染后(类似mounted)
                             inserted(dom,obj,vnode){
                              dom:指令所在标签dom
                              obj:{
                                属性，修饰符，值(value)
                              }
                              vnode:节点信息
                                 context:指令所在组件的实例(this)
                             }
                          update:更新时(指令所在组件有更新，不一定更新完成了)
                          componentUpdated:更新后（指令所在组件有更新，且更新一定完成了）类似updated
                          unbind:解绑后(类似destroyed)
                      })
                使用
                  v-指令名:属性名.修饰符="值"
                  v-on:keyup.enter='fn'
            局部自定义指令
                定义
                  directives:{
                    指令名:{
                      指令的生命周期
                    }
                  }
                使用
                  v-指令名:属性名.修饰符="值"
                  v-on:keyup.enter='fn'
    -->
    <!-- 实现v-hmtext指令 -->
    <div v-hmtext:aaa.bbb="msg" />
  </div>
</template>
<script>
export default {
  directives: {
    hmtext: {
      inserted(dom, obj, vnode) {
        console.log(dom, obj, vnode)
        dom.innerText = obj.value
      }
    }
  },
  data() {
    return {
      msg: '99期'
    }
  }
}
</script>
<style>
.red {
  color: red;
}
</style>
